<template>
	<view style="height: 400rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {};
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				that.init()
			})
		},
		methods: {
			init() { 
				this.$refs.chart.init(echarts, (chart) => {
					let option = option = {
						legend: false,
						grid: {
							left: '1%', // 左边距
							right: '1%', // 右边距
							top: '1%', // 上边距
							bottom: '6rpx', // 下边距
							containLabel: true // 确保标签不被遮挡
						},

						tooltip: {
							trigger: 'axis',
							// axisPointer: {
							// 	type: 'cross'
							// },
							formatter: function(params) {
								console.log(params)
								let res = ''; // params[0] 表示第一个触发 tooltip 的数据点
								params.forEach(function(item, index) {
									if (item.seriesType == 'line') {
										res += item.name + ' : ' + item.value ;
									}

								});
								return res;
							}
						},
						xAxis: [{
							type: 'category',
							data: ['01', '02', '03', '04', '05', '06', '07'],
							axisPointer: {
								type: 'shadow'
							},
							axisLabel: {
								show: true, // 显示标签
								textStyle: {
									color: '#333' // 标签颜色
								}
							},
							axisLine: {
								show: false
							}, // 不显示坐标轴线
							axisTick: {
								show: false // 隐藏刻度线
							},
						}],
						yAxis: [{
								type: 'value',
								min: 0,
								max: 250,
								axisLine: {
									show: false
								},
								minorTick: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitLine: {
									show: false
								},
							},
							{
								type: 'value',
								min: 0,
								max: 250,
								axisLine: {
									show: false
								},
								minorTick: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitLine: {
									show: false
								},
							}
						],
						series: [{
								name: 'Evaporation',
								type: 'bar',
								data: [
									250, 250, 250, 250, 250, 250, 250,
								],
								barCategoryGap: '6rpx', // 柱状图类目间距
								yAxisIndex: 1,
								// color: ['#F2F3FD'],
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(
											0, 1, 0, 0,
											[{
													offset: 1,
													color: ' #FFFFFF'
												},
												{
													offset: 0,
													color: 'rgba(235,237,252,0.74)'
												}
											]
										),
									},
									emphasis: {
										color: new echarts.graphic.LinearGradient(
											0, 1, 0, 0,
											[{
													offset: 1,
													color: '#EAECFB'
												},
												{
													offset: 0,
													color: '#EAECFB'
												}
											]
										),
									}
								},
							},
							{
								name: 'Temperature',
								type: 'line',
								yAxisIndex: 1,
								data: [
									15, 12, 23, 54, 84, 230, 24
								],
								smooth: true,
								color: ['#FF3131']
							}
						]
					};
					chart.setOption(option);
				});
			}
		}
	};
</script>